<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>留言板</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="app">
<div class="container">
    @if($user)
        <div>
            <p>
                <span>{{ $user->name }}({{ $user->role == 1 ? '管理员' : '普通会员' }})</span> |
                @if ($user->role == 1)
                <button class="manage-user"><a href="/users">管理用户</a></button> |
                @endif
                <button class="logout">退出</button>
            </p>
        </div>
    @else
        <div>
            <p>
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#registerModal">注册</button>
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginModal">登录</button>
            </p>
        </div>
    @endif
    @yield('content')
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="registerLabel">注册</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="name">用户名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="password-confirm">确认密码</label>
                        <input type="password" class="form-control" id="password-confirm" name="password_confirmation" placeholder="请确认密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary register">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="loginLabel">登录</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="name1">用户名</label>
                        <input type="text" class="form-control" id="name1" name="name" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label for="password1">密码</label>
                        <input type="password" class="form-control" id="password1" name="password" placeholder="请输入密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary login">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    $(function () {
        $('.register').click(function () {
            let name = $('#name').val();
            let password = $('#password').val();
            let password_confirmation = $('#password-confirm').val();
            let token = $('input[name="_token"]').val();

            $.ajax({
                method: "POST",
                url: "{{ route('register') }}",
                data: { name: name, password: password, password_confirmation: password_confirmation, _token: token },
                success: function (res) {
                    if (res.status == 'error') {
                        alert(res.message);
                        return
                    } else {
                        alert('注册成功');
                        $('#registerModal').modal('hide')
                    }
                }
            });
        });

        $('.login').click(function () {
            let name = $('#name1').val();
            let password = $('#password1').val();
            let token = $('input[name="_token"]').val();

            $.ajax({
                method: "POST",
                url: "{{ route('login') }}",
                data: { name: name, password: password, _token: token },
                success: function (res) {
                    if (res.status == 'error') {
                        alert(res.message);
                        return
                    } else {
                        alert('登录成功');
                        $('#registerModal').modal('hide')
                        location.href = '/feedback';
                    }
                }
            });
        });

        $('.logout').click(function () {
            let token = $('input[name="_token"]').val();

            $.ajax({
                method: "POST",
                url: "{{ route('logout') }}",
                data: { _token: token },
                success: function (res) {
                    if (res.status == 'error') {
                        alert(res.message);
                        return
                    } else {
                        alert('退出成功');
                        location.href = '/feedback'
                    }
                }
            });
        });
    });
</script>
@yield('scripts')
</body>
</html>
